<template>
  <view class="page">
    <!-- 退款状态卡片 -->
    <view class="status-card" :style="{ background: getRefundStatusGradient(order.refundStatus) }">
      <text class="status-icon">{{ getRefundStatusIcon(order.refundStatus) }}</text>
      <text class="status-text">{{ getRefundStatusText(order.refundStatus) }}</text>
      <text class="status-desc">{{ getRefundStatusDesc(order.refundStatus) }}</text>
      
      <!-- 拒绝原因 -->
      <view class="reject-reason" v-if="order.refundStatus === 3 && order.refundRejectReason">
        <text class="reason-label">拒绝原因：</text>
        <text class="reason-text">{{ order.refundRejectReason }}</text>
      </view>
    </view>

    <!-- 退款信息 -->
    <view class="section refund-info">
      <view class="section-title">
        <text class="title-icon">💰</text>
        <text class="title-text">退款信息</text>
      </view>
      <view class="info-content">
        <view class="info-item">
          <text class="info-label">订单金额</text>
          <text class="info-value">¥{{ order.actualAmount }}</text>
        </view>
        <view class="info-item" v-if="order.refundAmount">
          <text class="info-label">退款金额</text>
          <text class="info-value highlight">¥{{ order.refundAmount }}</text>
        </view>
        <view class="info-item" v-if="order.compensationAmount && order.compensationAmount > 0">
          <text class="info-label">补偿金额</text>
          <text class="info-value">¥{{ order.compensationAmount }}</text>
        </view>
        <view class="info-item" v-if="order.refundApplyTime">
          <text class="info-label">申请时间</text>
          <text class="info-value">{{ formatTime(order.refundApplyTime) }}</text>
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="section order-info">
      <view class="section-title">
        <text class="title-icon">📋</text>
        <text class="title-text">订单信息</text>
      </view>
      <view class="order-item">
        <view class="order-header">
          <text class="order-no">订单号：{{ order.orderNo }}</text>
          <text class="order-type">{{ getOrderTypeText(order.orderType) }}</text>
        </view>
        <view class="order-address" v-if="order.deliveryAddress">
          <text class="address-text">{{ order.deliveryAddress }}</text>
        </view>
      </view>
    </view>

    <!-- 退款进度 -->
    <view class="section progress-section" v-if="order.refundStatus === 1">
      <view class="section-title">
        <text class="title-icon">⏰</text>
        <text class="title-text">退款进度</text>
      </view>
      <view class="progress-content">
        <view class="progress-item completed">
          <view class="progress-dot"></view>
          <view class="progress-info">
            <text class="progress-title">提交申请</text>
            <text class="progress-time">{{ formatTime(order.refundApplyTime) }}</text>
          </view>
        </view>
        <view class="progress-line"></view>
        <view class="progress-item current">
          <view class="progress-dot"></view>
          <view class="progress-info">
            <text class="progress-title">商家审核中</text>
            <text class="progress-desc">预计{{ autoApproveTime }}小时内处理</text>
          </view>
        </view>
        <view class="progress-line"></view>
        <view class="progress-item">
          <view class="progress-dot"></view>
          <view class="progress-info">
            <text class="progress-title">退款完成</text>
            <text class="progress-desc">退款将原路返回</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 温馨提示 -->
    <view class="section tips-section">
      <view class="section-title">
        <text class="title-icon">💡</text>
        <text class="title-text">温馨提示</text>
      </view>
      <view class="tips-content">
        <view class="tip-item">
          <text class="tip-text">• 退款将在1-3个工作日内到账</text>
        </view>
        <view class="tip-item">
          <text class="tip-text">• 如有疑问请联系客服</text>
        </view>
        <view class="tip-item" v-if="order.orderType !== 1">
          <text class="tip-text">• 代取订单退款会扣除部分补偿金给接单人</text>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="btn btn-default" @click="goBack">返回</view>
      <view class="btn btn-primary" @click="refreshStatus">刷新状态</view>
    </view>
  </view>
</template>

<script>
import { getRefundStatus } from '@/api/refund'
import { 
  getOrderTypeText
} from '@/utils/orderStatus'

export default {
  data() {
    return {
      orderId: null,
      order: {},
      autoApproveTime: 2 // 自动审核时间（小时）
    }
  },
  onLoad(options) {
    if (options.orderId) {
      this.orderId = options.orderId
      this.loadRefundStatus()
    }
  },
  methods: {
    async loadRefundStatus() {
      try {
        uni.showLoading({ title: '加载中...' })
        const response = await getRefundStatus(this.orderId)
        //console.log('退款状态响应:', response)
        
        // 根据规范，请求拦截器已经返回了data字段的内容
        if (response) {
          this.order = response
        } else {
          throw new Error('订单数据为空')
        }
        uni.hideLoading()
      } catch (error) {
        console.error('加载退款状态失败:', error)
        uni.hideLoading()
        uni.showToast({
          title: error.message || '加载失败',
          icon: 'none'
        })
      }
    },

    refreshStatus() {
      this.loadRefundStatus()
    },

    goBack() {
      uni.navigateBack()
    },

    formatTime(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    },

    getRefundStatusText(status) {
      const statusMap = {
        0: '无退款',
        1: '审核中',
        2: '退款成功',
        3: '退款被拒绝'
      }
      return statusMap[status] || '未知状态'
    },

    getRefundStatusIcon(status) {
      const iconMap = {
        0: '📋',
        1: '⏳',
        2: '✅',
        3: '❌'
      }
      return iconMap[status] || '❓'
    },

    getRefundStatusDesc(status) {
      const descMap = {
        0: '该订单未申请退款',
        1: '商家正在审核您的退款申请',
        2: '退款已处理，请注意查收',
        3: '退款申请被拒绝，订单继续进行'
      }
      return descMap[status] || ''
    },

    getRefundStatusGradient(status) {
      const gradientMap = {
        0: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        1: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
        2: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
        3: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)'
      }
      return gradientMap[status] || gradientMap[0]
    },

    getOrderTypeText
  }
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 180rpx;
}

/* 状态卡片 */
.status-card {
  padding: 60rpx 32rpx;
  text-align: center;
  color: #fff;
  
  .status-icon {
    font-size: 80rpx;
    display: block;
    margin-bottom: 24rpx;
  }
  
  .status-text {
    font-size: 36rpx;
    font-weight: 600;
    display: block;
    margin-bottom: 16rpx;
  }
  
  .status-desc {
    font-size: 28rpx;
    opacity: 0.9;
    display: block;
  }
  
  .reject-reason {
    margin-top: 32rpx;
    padding: 24rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12rpx;
    text-align: left;
    
    .reason-label {
      font-size: 28rpx;
      font-weight: 600;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .reason-text {
      font-size: 26rpx;
      line-height: 1.5;
    }
  }
}

/* 通用样式 */
.section {
  background: #fff;
  margin: 20rpx 32rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.section-title {
  display: flex;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1px solid #f0f0f0;
  
  .title-icon {
    font-size: 32rpx;
    margin-right: 16rpx;
  }
  
  .title-text {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
}

/* 退款信息 */
.refund-info {
  .info-content {
    padding: 32rpx;
  }
  
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .info-label {
    font-size: 30rpx;
    color: #666;
  }
  
  .info-value {
    font-size: 30rpx;
    color: #333;
    font-weight: 500;
    
    &.highlight {
      color: #ff6b35;
      font-weight: 600;
    }
  }
}

/* 订单信息 */
.order-info {
  .order-item {
    padding: 32rpx;
  }
  
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
  }
  
  .order-no {
    font-size: 28rpx;
    color: #666;
  }
  
  .order-type {
    font-size: 24rpx;
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
    background: #f0f0f0;
    color: #666;
  }
  
  .order-address {
    .address-text {
      font-size: 28rpx;
      color: #333;
      line-height: 1.5;
    }
  }
}

/* 退款进度 */
.progress-section {
  .progress-content {
    padding: 32rpx;
  }
  
  .progress-item {
    display: flex;
    align-items: flex-start;
    position: relative;
    
    &.completed .progress-dot {
      background: #4facfe;
      border-color: #4facfe;
    }
    
    &.current .progress-dot {
      background: #ff6b35;
      border-color: #ff6b35;
      animation: pulse 2s infinite;
    }
  }
  
  .progress-dot {
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    border: 4rpx solid #e0e0e0;
    background: #e0e0e0;
    margin-top: 8rpx;
    flex-shrink: 0;
  }
  
  .progress-info {
    margin-left: 24rpx;
    flex: 1;
    
    .progress-title {
      font-size: 30rpx;
      color: #333;
      font-weight: 500;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .progress-time, .progress-desc {
      font-size: 26rpx;
      color: #999;
    }
  }
  
  .progress-line {
    width: 2rpx;
    height: 60rpx;
    background: #e0e0e0;
    margin-left: 10rpx;
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20rpx rgba(255, 107, 53, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
  }
}

/* 温馨提示 */
.tips-section {
  .tips-content {
    padding: 32rpx;
  }
  
  .tip-item {
    margin-bottom: 16rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .tip-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 32rpx;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  gap: 24rpx;
}

.btn {
  flex: 1;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: 600;
  
  &.btn-default {
    background: #f0f0f0;
    color: #666;
  }
  
  &.btn-primary {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: #fff;
  }
}
</style>
